<template>
	<view class="page">
		<view class="header-bg"></view>
		<view class="team">
			<view class="team-title">我的团队</view>
			<view class="team-number">{{teamnum}}</view>
		</view>
		<scroll-view scroll-x class="nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in navList" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>

		<view class="content">
			<!--  直推列表 -->
			<scroll-view class="grabBag_content" :scroll-y="true" @scrolltolower="lower1" v-if="show == 5">
				<view class="list flex justify-between align-center" v-for="(item,index) in zhituilist" :key="index+100">
					<view class="list-info flex">
						<image :src="item.icon" />
						<view class="info-content">
							<view class="info">
								<view class="name">{{item.nickname}}</view>
								<view class="tag" v-if="item.mjLevel == 0">普通会员</view>
								<view class="tag" v-if="item.mjLevel == 1">妙街导购</view>
								<view class="tag" v-if="item.mjLevel == 2">妙街店长</view>
							</view>
							<view class="tel">
								{{item.phone || '微信登录'}}
							</view>
						</view>
					</view>
					<view class="list-more">
						<!-- <text class="cuIcon-right"></text> -->
					</view>
				</view>
			</scroll-view>
			<!--  团队列表 -->
			<scroll-view class="grabBag_content" :scroll-y="true" @scrolltolower="lower2" v-if="show == 193">
				<view class="list flex justify-between align-center" v-for="(item,index) in teamlist" :key="index" >
					<view class="list-info flex">
						<image :src="item.icon" />
						<view class="info-content">
							<view class="info">
								<view class="name">{{item.nickname}}</view>
								<view class="tag" v-if="item.mjLevel == 0">普通会员</view>
								<view class="tag" v-if="item.mjLevel == 1">妙街导购</view>
								<view class="tag" v-if="item.mjLevel == 2">妙街店长</view>
							</view>
							<view class="tel">
								{{item.phone || '微信登录'}}
							</view>
						</view>
					</view>
					<view class="list-more">
						<!-- <text class="cuIcon-right"></text> -->
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>
<script>
	import Api from "@/common/api";
	export default {
		data() {
			return {
				navList: ['直推人数', '团队人数'],
				TabCur: 0,
				// scrollLeft: 0,
				teamnum: 0,
				zhituilist: [],
				teamlist: [],
				show: 5,
				// 直推
				pageNum: 1,
				pageSize: 5,
				zhituitotal: 0,
				zhituicurrpage: 0,
				teamtotal: 0,
				teamcurrpage: 0
			};
		},
		// onLoad() {
		// 	let userInfo = uni.getStorageSync('userInfo')
		// 	//console.log(userInfo)
		// },
		onShow() {
			this.getzhiTui();
			this.getTeam();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.show = e.currentTarget.offsetLeft; //5 193 
			},
			//获取直推列表
			async getzhiTui() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				let res = await Api.apiCall('', 'single/user/inviteUser', params, true);
				//console.log('直推列表', res)
				if (res) {
					this.zhituilist = res.records;
					this.zhituitotal = res.pages;
					this.zhituicurrpage = res.current;
				}
			},
			async lower1() {
				let num = parseInt(this.zhituicurrpage);
				let pageNum = num + 1;
				this.zhituicurrpage = pageNum;
				let params = {
					pageNum: pageNum,
					pageSize: 5
				};
				if (pageNum <= this.zhituitotal) {
					let res = await Api.apiCall('', 'single/user/inviteUser', params, true);
					if (res) {
						this.zhituilist = this.zhituilist.concat(res.records);
					}
				}
			},
			//获取团队列表
			async getTeam() {
				let params = {
					pageNum: 1,
					pageSize: 10
				};
				let res = await Api.apiCall('', 'single/user/teamUser', params, true);
				if (res) {
					this.teamnum = res.total;
					this.teamlist = res.records;
					this.teamtotal = res.pages;//总页数
					this.teamcurrpage = res.current;//当前页
				}
			},
			async lower2() {
				let num = parseInt(this.teamcurrpage);
				let pageNum = num + 1;
				this.teamcurrpage = pageNum;
				let params = {
					pageNum: this.teamcurrpage,
					pageSize: 10
				};
				if (pageNum <= this.teamtotal) {
					let res = await Api.apiCall('', 'single/user/teamUser', params, true);
					if (res) {
						this.teamlist = this.teamlist.concat(res.records);
						
					}
				}
			},
		}
	};
</script>
<style lang="scss">
	.page {
		min-height: 100vh;
		width: 100%;

		// 列表滚动高度
		.grabBag_content {
			height: 64vh;
		}

		.header-bg {
			width: 100%;
			height: 200upx;
			background: #C648FF;
		}

		.team {
			margin-top: -120upx;
			margin-left: 30upx;
			margin-right: 30upx;
			border-radius: 30upx;
			background: #fff;
			height: 220upx;
			text-align: center;

			.team-title {
				padding-top: 40upx;
				margin-bottom: 16upx;
				font-size: 36upx;
				color: #666;
			}

			.team-number {
				font-size: 86upx;
				color: #333;
			}
		}

		.nav .cu-item {
			font-size: 32upx;
			color: #F94242;
			font-weight: bold;
		}

		.nav .cu-item.cur {
			color: #fff;
			font-size: 36upx;
			border: 0;
			background: linear-gradient(to top, #FF7777, #FF1D1D);
			border-radius: 20upx 20upx 0px 0px;
		}

		.nav {
			margin-top: 40upx;
		}

		.content {
			background: #fff;
			padding: 0 30upx;

			.list:last-child {
				border: 0;
			}

			.list {
				padding: 30upx 0;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.1);

				.list-info {
					image {
						width: 120upx;
						height: 120upx;
					}

					.info-content {
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.info {
							display: flex;
							align-items: center;

							.name {
								font-size: 36upx;
								font-weight: bold;
								color: #333;
							}

							.tag {
								margin-left: 10upx;
								font-size: 20upx;
								width: 120upx;
								height: 36upx;
								background: linear-gradient(135deg, rgba(255, 213, 121, 1) 0%, rgba(255, 158, 25, 1) 100%);
								border-radius: 0px 16upx 16upx 16upx;
								text-align: center;
								line-height: 36upx;
								color: #fff;
							}
						}

						.tel {
							font-size: 28upx;
							color: #999;
						}
					}
				}

				.list-more {
					font-size: 20upx;
					color: #999;
				}
			}
		}
	}
</style>
